<template>
  <div class="quantity-page h100">
    <div class="quantity-top">
      <div>{{ currentDept.departmentName }}</div>
      <div class="flex flex-justify mt15">
        <div class="flex-model flex-center" @click="pushRouter('/intake?type=1')">
          <Image
            width="36"
            height="36"
            round
            :src="require('@/static/Intake.png')"
          />
          <span class="f32 fw500 title-black ml15">记录摄入量</span>
        </div>
        <div class="flex-model flex-center" @click="pushRouter('/intake?type=2')">
          <Image
            width="36"
            height="36"
            round
            :src="require('@/static/discharge.png')"
          />
          <span class="f32 fw500 title-black ml15">记录排出量</span>
        </div>
      </div>
      <div class="quan-model flex flex-center">
        <div class="f48 title-black flex1 flex-center">
          <div>
            <div class="flex-center text-bold f48">
              {{ inCount }}
            </div>
            <div class="title-gray f26 flex-center mt5">
              今日摄入总量(ml)
            </div>
          </div>
        </div>
        <div class="list-shu" />
        <div class="f48 title-black flex1 flex-center">
          <div>
            <div class="flex-center text-bold f48">
              {{ outCount }}
            </div>
            <div class="title-gray f26 flex-center mt5">
              今日排出总量(ml)
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="quantity-main">
      <p class="f32 fw600">
        出入量详情
      </p>
      <div class="main-list" v-if="detailList && detailList.length > 0">
        <div
          class="list-model"
          v-for="(item,index) of detailList"
          :key="index"
        >
          <div class="ml20 model-right">
            <div class="f36 title-black text-bold">
              {{ item.inMl ? `+${item.inMl}ml` : `-${item.outMl}ml` }}
            </div>
            <div class="f22 title-gray">
              {{ item.createTime ? item.createTime.split(' ')[1] : '' }} | {{ item.patientName }}
            </div>
            <div class="mb20">
              <div
                class="flex-right flex flex-justify align-center"
                v-for="(val,valIndex) of item.detailArr"
                :key="valIndex"
              >
                <div class="fw500 f22 title-gray">
                  {{ val.foodName }}{{ item.inMl ? `/${val.gnum}g` : '' }}
                </div>
                <div class="fw500 f26 title-black">
                  {{ item.inMl ? '+' : '-' }}{{ val.mlNum }}ml
                </div>
              </div>
            </div>
          </div>
          <Image
            class="model-img"
            width="28"
            height="28"
            round
            :src="item.inMl ? require('@/static/Intake.png') : require('@/static/discharge.png')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { TAG_BG } from '@/constants/static';
import { useService } from '@/utils/services';
import { useRouter } from 'vue-router';
import Image from '@/components/Image';
import { useCurrentDeptInfo } from '@/hooks/store';
import { useUserInfo } from '@/hooks/store';
export default {
  components: {
    Image
  },
  setup() {
    const actions = useService(({ hos }) => ({ hos }));

    const router = useRouter();
    const pushRouter = (url) => {
      router.push(url);
    };
    const userInfo = useUserInfo();
    const currentDept = useCurrentDeptInfo();

    const detailList = ref([]);

    const todayDate = () => {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      return year + '-' + month + '-' + day;
    };

    const inCount = ref(0); // 入量总数

    const outCount = ref(0); // 出量总数

    //查询当日出入量总数
    const getRecordCountByQrcode4Mini = () => {
      actions.hos
        .getRecordCountByQrcode4Mini({ qrcodeId: userInfo.value.qrcodeId, showDate: todayDate() })
        .then((res) => {
          inCount.value = res.inCount || 0;
          outCount.value = res.outCount || 0;
        });
    };

    //查询当日出入量详情
    const getInOutDetailsList = () => {
      let form = {
        currentPage: 1,
        pageSize: 1000,
        qrcodeId: userInfo.value.qrcodeId,
        showDate: todayDate()
      };
      actions.hos.getInOutDetailsList(form).then((res) => {
        detailList.value = res.records || [];
        detailList.value.forEach((item) => {
          if (item.inDetails) {
            item.detailArr = JSON.parse(item.inDetails);
          }
          if (item.outDetails) {
            item.detailArr = JSON.parse(item.outDetails);
          }
        });
      });
    };

    getInOutDetailsList();

    getRecordCountByQrcode4Mini();

    return {
      inCount,
      outCount,
      detailList,
      pushRouter,
      currentDept
    };
  }
};
</script>

<style lang="scss" scoped>
.quantity-top {
  padding: 40px 32px 30px;
  height: 442px;
  position: relative;
  font-size: 36px;
  border-radius: 0 0 20px 20px;
  font-weight: 500;
  color: #ffffff;
  .flex-model {
    width: 328px;
    height: 128px;
    background: #ffffff;
    border-radius: 16px;
  }
  .quan-model {
    position: absolute;
    height: 230px;
    background: #ffffff;
    z-index: 100;
    border-radius: 12px;
    bottom: -50px;
    width: 686px;
    box-shadow: 0px 4px 24px 0px #f2f2f2;
  }
}
.quantity-main {
  background: #fdfdfd;
  padding: 40px 32px 30px;
  padding-top: 100px;
  height: calc(100vh - 442px);
  overflow-y: auto;
  .main-list {
    box-shadow: 0px 4px 24px 0px #f2f2f2;
    padding: 20px 0;
    margin-bottom: 100px;
    margin-top: 25px;
    border-radius: 12px;
  }
}
.title-black {
  color: #373d52;
}
.title-gray {
  color: #a2a6b8;
}
.list-shu {
  width: 1px;
  height: 72px;
  background: rgba(216, 216, 216, 0.5);
}
.list-model {
  border-left: 2px solid rgba(162, 166, 184, 0.2);
  padding: 20px;
  margin-left: 40px;
  position: relative;
  .model-right {
    border-bottom: 2px solid rgba(162, 166, 184, 0.2);
    .flex-right {
      margin-top: 25px;
    }
  }
  .model-img {
    position: absolute;
    top: 38px;
    left: -30px;
  }
}
</style>